import React, { PureComponent, Fragment } from 'react';
import {
  Table,
  Input,
  InputNumber,
  Popconfirm,
  Form,
  Button,
  Divider,
  Tooltip,
  Select,
  message,
} from 'antd';
import isEqual from 'lodash/isEqual';
import { connect } from 'dva';
import { formatMessage } from 'umi/locale';
import styles from './TableStyle.less';

const FormItem = Form.Item;
const EditableContext = React.createContext();

const EditableRow = ({ form, index, ...props }) => (
  <EditableContext.Provider value={form}>
    <tr {...props} />
  </EditableContext.Provider>
);

const EditableFormRow = Form.create()(EditableRow);

class EditableCell extends React.Component {
  getInput = () => {
    return <Input style={{ width: '100%', color: 'blue' }} />;
  };

  render() {
    const {
      editing,
      dataIndex,
      title,
      inputType,
      record,
      index,
      max,
      min,
      step,
      ...restProps
    } = this.props;
    return (
      <EditableContext.Consumer>
        {form => {
          const { getFieldDecorator } = form;
          return (
            <td {...restProps}>
              {editing ? (
                <FormItem style={{ margin: 0 }}>
                  {getFieldDecorator(dataIndex, {
                    rules: [
                      {
                        required: true,
                        message: '请输入' + `${title}!`,
                      },
                    ],
                    initialValue: record[dataIndex],
                  })(this.getInput())}
                </FormItem>
              ) : (
                restProps.children
              )}
            </td>
          );
        }}
      </EditableContext.Consumer>
    );
  }
}

@connect(({ os }) => ({ os }))
class OrderForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editingKey: '', workingOrder: {} };
    this.columns = [
      {
        title: '产品Id',
        dataIndex: 'boardIndex',
        width: '14.2857%',
        editable: false,
        inputType: 'string',
      },
      {
        title: '作业时间',
        dataIndex: 'workTime',
        width: '14.2857%',
        editable: false,
        inputType: 'string',
      },
      {
        title: '识别信息',
        dataIndex: 'calcInfo',
        width: '14.2857%',
        editable: false,
        inputType: 'string',
      },
      {
        title: '实际用板编号',
        dataIndex: 'realNumber',
        width: '14.2857%',
        editable: false,
        inputType: 'string',
      },
      {
        title: '实际用日期',
        dataIndex: 'realDate',
        width: '14.2857%',
        editable: false,
        inputType: 'string',
      },
      {
        title: 'OK/NG',
        dataIndex: 'calcRes',
        width: '14.2857%',
        editable: false,
        inputType: 'string',
      },
      // {
      //   title: formatMessage({ id: 'app.produce.operate' }),
      //   key: 'action',
      //   width: '14.2857%',
      //   render: (text, record) => {
      //     const editable = this.isEditing(record);
      //     return (
      //       <div>
      //         {editable ? (
      //           <span>
      //             <EditableContext.Consumer>
      //               {form => (
      //                 <a
      //                   href="javascript:;"
      //                   onClick={() => this.saveOrder(form, record.key)}
      //                   style={{ marginRight: 8 }}
      //                 >
      //                   保存
      //                 </a>
      //               )}
      //             </EditableContext.Consumer>
      //             <Popconfirm title="确定取消吗" onConfirm={() => this.cancel(record.key)}>
      //               <a>取消</a>
      //             </Popconfirm>
      //           </span>
      //         ) : (
      //           <span>
      //             <a onClick={() => this.edit(record.key)}>编辑</a>
      //             <Divider type="vertical" />
      //             <Popconfirm title="保存" onConfirm={() => this.deleteOrder(record.key)}>
      //               <a>删除</a>
      //             </Popconfirm>
      //           </span>
      //         )}
      //       </div>
      //     );
      //   },
      // },
    ];
  }
  isEditing = record => record.key === this.state.editingKey;

  cancel = () => {
    this.setState({ editingKey: '' });
  };
  handleOnRow = record => {
    const { dispatch } = this.props;
    return {
      onDoubleClick: event => {
        dispatch({
          type: 'os/updateChooseOrder',
          payload: [record],
        });
      },
    };
  };
  saveOrder(form, key) {
    const { dispatch } = this.props;
    const { order } = this.state;
    form.validateFields((error, row) => {
      if (error) {
        return;
      }
      const newData = { ...order, ...row, key: key };
      this.setState({ order: {} });
      this.edit('');
      dispatch({
        type: 'os/saveOrder',
        payload: newData,
      });
    });
  }

  deleteOrder(key) {
    const { dispatch } = this.props;
    dispatch({
      type: 'os/deleteOrder',
      payload: key,
    });
  }

  edit(key) {
    this.setState({ editingKey: key });
  }

  render() {
    const { workingOrder, totalOrders, showTotalOrdersFlag } = this.props.os;
    let showData;
    if (showTotalOrdersFlag) {
      showData = totalOrders;
    } else {
      showData = workingOrder;
    }
    const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell,
      },
    };

    const columns = this.columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          inputType: col.inputType,
          dataIndex: col.dataIndex,
          max: col.max,
          min: col.min,
          step: col.step,
          title: col.title,
          editing: this.isEditing(record),
        }),
      };
    });

    // return (
    //   <Fragment>
    //     <Table
    //       components={components}
    //       bordered
    //       dataSource={showData}
    //       pagination={showTotalOrdersFlag}
    //       columns={columns}
    //       rowClassName="editable-row"
    //       size={'small'}
    //       onRow={this.handleOnRow}
    //     />
    //   </Fragment>
    // );
    return (
      <Fragment>
        <Table
          components={components}
          bordered
          dataSource={showData}
          pagination={showTotalOrdersFlag}
          columns={columns}
          rowClassName={record => (record.calcRes === 'OK' ? styles.white : styles.red)}
          size={'small'}
        />
      </Fragment>
    );
  }
}

export default OrderForm;
